'use client';
import React, { useState } from 'react';
import { deleteMirrorAction } from '@/lib/actions';
import { XMarkIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { useFormStatus } from 'react-dom';

// 删除文件
export function DeleteMirror({ filepath }: { filepath: string }) {
    const [visible, setVisible] = useState<boolean>(false);
    const deleteMirrorWithId = deleteMirrorAction.bind(null, filepath);

    return (
        <div>
            <button
                onClick={() => {
                    setVisible(true);
                }}
                className='inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 '
            >
                <span className='hidden md:block'>删除</span>
            </button>
            {visible && (
                <div className='modal-root'>
                    <div className='modal-mask bg-opacity-50  bg-gray-400  fixed inset-0 z-[1000]   '>
                        <div className='modal-wrap fixed inset-0 z-[1000] overflow-auto outline-0'>
                            <div className='modal w-[520px] relative top-[100px] box-border my-0 mx-auto'>
                                <div>
                                    <div className='modal-content relative bg-white rounded-md shadow-md px-5 py-6'>
                                        <button
                                            type='button'
                                            onClick={() => {
                                                setVisible(false);
                                            }}
                                            className='modal-close absolute top-3 right-3 z-[1010]'
                                            title='删除'
                                        >
                                            <XMarkIcon className='w-8' />
                                        </button>

                                        <div className='modal-body'>
                                            <div className='mb-4'>删除后无法恢复，确定删除吗？</div>
                                            <form
                                                action={deleteMirrorWithId}
                                                className='text-right'
                                            >
                                                <DeleteButton />
                                            </form>
                                        </div>
                                        <div className='modal-footer mt-3 text-right'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

function DeleteButton() {
    const { pending } = useFormStatus();

    return (
        <button
            type='submit'
            className={clsx('inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 ', {
                'cursor-not-allowed': pending,
            })}
            disabled={pending}
        >
            {pending && (
                <svg
                    className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
                    xmlns='http://www.w3.org/2000/svg'
                    fill='none'
                    viewBox='0 0 24 24'
                >
                    <circle
                        className='opacity-25'
                        cx='12'
                        cy='12'
                        r='10'
                        stroke='currentColor'
                        stroke-width='4'
                    ></circle>
                    <path
                        className='opacity-75'
                        fill='currentColor'
                        d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
                    ></path>
                </svg>
            )}
            开始删除
        </button>
    );
}
